<template>
  <div>
    <codemirror v-model="localValue" :options="cmOptions" style="height: 500px;"/>
  </div>
</template>

<script>
import {codemirror} from 'vue-codemirror';
import 'codemirror/lib/codemirror.css';
import 'codemirror/mode/javascript/javascript.js'; // 根据需要引入不同的语言模式
import 'codemirror/mode/yaml/yaml.js'

export default {
  name: 'CodeEditor',
  components: {
    codemirror,
  },
  props: {
    value: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      localValue: this.value,
      cmOptions: {
        mode: 'yaml', // 设置语言模式
        lineNumbers: true,   // 显示行号
        theme: 'default',    // 设置主题，可以根据需要引入其他主题
        indentUnit: 2, // 设置缩进单位为2个空格
        extraKeys: {
          Tab: function (cm) {
            // 使用真正的Tab缩进（这里我们实际用空格代替）
            const spaces = " ".repeat(cm.getOption("indentUnit"));
            cm.replaceSelection(spaces);
          }
        }
      },
    };
  },
  watch:{
    localValue(newValue) {
      this.$emit('input', newValue);
    },
    value(newValue) {
      if (this.localValue !== newValue) {
        this.localValue = newValue;
      }
    },
  },
  mounted() {
    // 可以在这里做一些额外的初始化工作，比如设置编辑器焦点等
  },
};
</script>

<style scoped>
</style>